<!-- 企业 综合看板-->
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
        <title>企业 综合看板</title>
        <link rel="stylesheet" href="css/app.css" />
        <script src="js/echarts.min.js"></script>
        <script src="js/xinjiang.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/request.js"></script>
        <script src="js/time.js"></script>
        <style>
            .btns {
                position: absolute;
                top: .9rem;
                left: 44px;
                z-index: 1000;
            }

            .btns .btn {
                background-color: rgba(12, 69, 154, .5);
                padding: 4px 10px;
                border: none;
                border-radius: 4px;
                color: #3A9DFD;
                cursor: pointer;
            }

            .btns .activeBtn {
                background-color: #0C459A;
                font-weight: bold;
            }

            #time {
                position: absolute;
                top: 1rem;
                right: 44px;
                color: #206bdb;
                font-weight: bold;
            }

            .unit-box {
                position: relative;
            }

            .unit {
                position: absolute;
                top: .5rem;
                right: 1rem;
                color: #fff;
                font-size: .7rem;
            }

            .total {
                position: absolute;
                width: 100%;
                left: 0;
                border: 1rpx solid red;
                text-align: center;
                color: #fff;
                font-size: 14px;
            }
        </style>
        <!-- 工人情况 -->
        <style>
            #tu5 {
                height: 66%;
                margin-top: .5rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

            .item {
                width: 40%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .round {
                width: 3rem;
                height: 3rem;
                margin-right: .6rem;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #06245E;
            }
        </style>
    </head>

    <body class="biao2">
        <div class="header">
            <div class="btns">
                <button class="btn activeBtn">综合看板</button>
                <button class="btn" onclick="location.href='./enterprise2.html'">预警看板</button>
            </div>
            <div id="time"></div>
            <h1 class="header-title" style="color: #FFFFFF;">兵团农民工工资支付监控预警平台</h1>
        </div>
        <div class="wrapper">
            <div class="content" style="padding:50px 15px 25px">
                <div class="col col-l">
                    <div class="xpanel-wrapper xpanel-wrapper-70">
                        <div class="xpanel xpanel-l-t Bj unit-box">
                            <div class="title">项目分布</div>
                            <div class="total">总计：<span>0</span></div>
                            <div class="xslb" id="tu1" style="width:100%;height:93%;overflow:auto;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-30">
                        <div class="xpanel xpanel-r-t Bj unit-box">
                            <div class="title">开户情况</div>
                            <span class="unit">单位：个</span>
                            <div class="xslb" id="tu2" style="width:100%;height:85%;"></div>
                        </div>
                    </div>
                </div>

                <div class="col col-c">
                    <div class="xpanel-wrapper xpanel-wrapper-60">
                        <div class="xpanel DiTu1 Bj">
                            <div class="title">地图</div>
                            <div class="TuBiao" id="tu3" style="width:100%;height:92%;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-40">
                        <div class="xpanel DiTu1 Bj">
                            <div class="title">本月工资发放情况</div>
                            <div class="TuBiao" id="tu4" style="width:100%;height:90%;"></div>
                        </div>
                    </div>
                </div>

                <div class="col col-r">
                    <div class="xpanel-wrapper xpanel-wrapper-24" style="height:24%">
                        <div class="xpanel xpanel-r-b Bj unit-box">
                            <div class="title">工人情况</div>
                            <span class="unit">单位：人</span>
                            <div class="tu" id="tu5" style="width:100%;height:66%;">
                                <div class="item">
                                    <div class="round">
                                        <img src="./img/icon1.png">
                                    </div>
                                    <div>
                                        <div style="color:#fff">100</div>
                                        <span style="color:#ccc; font-size:.75rem;">实名制人数</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="round">
                                        <img src="./img/icon2.png">
                                    </div>
                                    <div>
                                        <div style="color:#fff">100</div>
                                        <span style="color:#ccc; font-size:.75rem;">进场工人数</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="round">
                                        <img src="./img/icon3.png">
                                    </div>
                                    <div>
                                        <div style="color:#fff">100</div>
                                        <span style="color:#ccc; font-size:.75rem;">离场工人数</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="round">
                                        <img src="./img/icon4.png">
                                    </div>
                                    <div>
                                        <div style="color:#fff">100</div>
                                        <span style="color:#ccc; font-size:.75rem;">考勤工人数</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-40">
                        <div class="xpanel xpanel-r-m Bj">
                            <div class="title">工人分布情况</div>
                            <div class="tu" id="tu6" style="width:100%;height:88%;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-36" style="height:36%">
                        <div class="xpanel xpanel-r-m Bj">
                            <div class="title">开户银行</div>
                            <div class="tu" id="tu7" style="width:100%;height:88%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        var colorArr = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#9f05c5", "#c29927"];
        var colorAlpha = [
            'rgba(60,170,211,0.1)', 'rgba(1,203,179,0.1)', 'rgba(133,230,71,0.1)', 'rgba(93,92,218,0.1)',
            'rgba(159,5,197,0.1)', 'rgba(194,153,39,0.1)'
        ]


        // 获取当前时间
        getTimeFn()
        window.setInterval(() => {
            setTimeout(() => {
                getTimeFn()
            }, 0)
        }, 1000)
        // 获取时间
        function getTimeFn() {
            $('#time').text(getTime().date + '  ' + getTime().time)
        }


        // 获取参数
        const xinjiang = { // 正式上线这里要去掉
            deptId: 28533, // 部门id
        }
        sessionStorage.setItem('xinjiang', JSON.stringify(xinjiang))
        const { deptId } = JSON.parse(sessionStorage.getItem('xinjiang'))
        console.log('参数', deptId)


        // 项目分布
        var mytu1 = echarts.init(document.getElementById('tu1'));
        // 开户情况
        var mytu2 = echarts.init(document.getElementById('tu2'));
        // 地图
        var mytu3 = echarts.init(document.getElementById('tu3'));
        // 本月工资发放情况
        var mytu4 = echarts.init(document.getElementById('tu4'));
        // 工人情况
        var mytu5 = null
        // 工人分布情况
        var mytu6 = echarts.init(document.getElementById('tu6'));
        // 开户银行
        var mytu7 = echarts.init(document.getElementById('tu7'));


        // 项目分布
        getProject()
        // 开户情况
        openAccount()
        // 地图
        getMapData()
        // 本月工资发放情况
        payoff()
        // 工人情况
        getWorkerData()
        // 工人分布情况
        workerFenbu()
        // 开户银行
        bank()


        // 轮询
        // window.setInterval(() => {
        //     setTimeout(() => {
        //         getProject()
        //         openAccount()
        //         getMapData()
        //         payoff()
        //         getWorkerData()
        //         workerFenbu()
        //         bank()
        //     }, 0)
        // }, 3000)


        // 项目分布
        function getProject() {
            get('/index/bigScreen/api/projectDistribute?deptId=' + deptId, null, function (res) {
                const { data } = res
                console.log('项目分布', data)
                const yData = []
                const ingData = [] // 在建项目
                const finishData = [] // 完工项目
                const titleData = []
                data.map((v, i) => {
                    yData.push(v.districtName)
                    ingData.push(v.building)
                    finishData.push(v.donedeal)
                    titleData.push({
                        value: 0,
                        label: {
                            normal: {
                                show: true,
                                position: [-10, -6],
                                formatter: '{b}',
                                offset: [10, 0],
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 12
                                }
                            }
                        }
                    })
                })
                yData.reverse()
                ingData.reverse()
                finishData.reverse()
                // 计算总计
                const arr = ingData.concat(finishData)
                let total = 0
                arr.map((v, i) => {
                    total += v
                })
                $('.total span').text(total)

                const option1 = {
                    grid: {
                        left: '8%',
                        right: '8%',
                        top: '8%',
                        bottom: '2%',
                    },
                    tooltip: { // 可以配合下方的tooltip出来单个悬浮信息.
                        trigger: 'item',
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    legend: {
                        top: 20,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                        itemWidth: 16,
                        itemHeight: 10,
                        itemGap: 12,
                        data: ['在建项目', '已完工项目']
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },

                    yAxis: {
                        type: 'category',
                        data: yData,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            symbol: 'rect',
                            symbolRepeat: 'fixed',
                            symbolMargin: '70%',
                            symbolClip: true,
                            symbolSize: [10, 70],
                            symbolBoundingData: 1000,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [-10, 70],
                                    textStyle: {
                                        color: 'darkorange',
                                        fontSize: 16
                                    }
                                }
                            },
                            data: titleData,
                            z: 99999999,
                        },

                        {
                            name: '在建项目',
                            type: 'bar',
                            data: ingData,
                            barWidth: 6,
                            tooltip: {
                                show: true
                            },
                            z: 10,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                    }], false),
                                    barBorderRadius: 11,
                                }
                            },
                            label: {
                                show: true,
                                fontSize: 20,
                                distance: 10,
                                position: [0, -50],
                                offset: [0, -50],
                                normal: {
                                    show: true,
                                    position: 'right',
                                    color: '#fff',
                                }
                            },
                        },

                        {
                            name: '已完工项目',
                            type: 'bar',
                            data: finishData,
                            barWidth: 6,
                            tooltip: {
                                show: true
                            },
                            z: 10,
                            barGap: 1,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                        offset: 0,
                                        color: '#FF911E' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#FF911E' // 100% 处的颜色
                                    }], false),
                                    barBorderRadius: 11,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                },
                                color: '#fff',
                            },
                        }
                    ]
                };

                // 项目分布
                mytu1.setOption(option1);
            })
        }

        // 开户情况
        function openAccount() {
            get('/index/bigScreen/api/account?deptId=' + deptId, null, function (res) {
                console.log('开户情况', res.data)
                const { data } = res
                const xData = []
                data.map((v, i) => {
                    xData.push(v.name)
                })

                const seriesData = []

                const arr = []
                data.map((a, b) => {
                    try {
                        a.data.map((v, i) => {
                            arr.push(v.bankType)
                        })
                    } catch (error) { }
                })
                const arr1 = Array.from(new Set(arr))

                arr1.map((v, i) => {
                    seriesData.push(
                        {
                            name: v,
                            data: [],
                            stack: "one",
                            type: "bar",
                            barWidth: 24,
                            label: {
                                normal: {
                                    show: true
                                },
                            }
                        }
                    )
                })

                seriesData.map((v, i) => {
                    data.map((a, b) => {
                        if (a.data) {
                            a.data.map((c, d) => {
                                if (v.name == c.bankType) {
                                    v.data[b] = c.account
                                }
                            })
                        }
                    })
                })

                // console.log(666888, xData,seriesData)
                const legendData = []
                seriesData.map((v, i) => {
                    legendData.push(v.name)
                })

                const option2 = {
                    color: colorArr,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        position: ['50%', '50%'],
                    },
                    legend: {
                        show: true,
                        x: 'center',
                        bottom: '5%',
                        itemGap: 10,
                        data: legendData,
                        itemWidth: 18,
                        itemHeight: 8,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    grid: {
                        top: '8%',
                        left: '15%',
                        right: '8%',
                        bottom: '35%',
                    },
                    xAxis: [
                        {
                            // "name": "时段",
                            type: "category",
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {//坐标轴轴线相关设置
                                lineStyle: {
                                    color: '#0a3256',
                                    opacity: 0.2
                                }
                            },
                            axisLabel: { // 坐标轴刻度标签的相关设置。
                                interval: 0,// 设置为 1，表示『隔一个标签显示一个标签』
                                margin: 15,
                                rotate: 0,
                                textStyle: {
                                    color: '#aaa',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            data: xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            minInterval: 1,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0a3256'
                                }
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: '#d1e6eb',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        }
                    ],
                    series: seriesData,
                }
                mytu2.setOption(option2);
            })
        }

        // 地图
        function getMapData() {
            get('/index/bigScreen/api/nation', null, function (list) {
                let points = list.data
                get('/index/bigScreen/api/mapInfo?deptId=' + deptId, null, function (res) {
                    const data = res.data
                    const mapData = []
                    data.map((v, i) => {
                        v['name'] = v.districtName,
                            points.map((a, b) => {
                                if (v.districtId == a.districtId) {
                                    v['value'] = a.point.split(',')
                                }
                            })
                        mapData.push(v)
                    })
                    console.log('地图信息', mapData)
                    const option3 = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (res) {
                                const data = res.data
                                return `<b style="color:yellow">${data.name}</b><br/>
                                    专户余额:  <span style="margin-right:.5rem">${data.balance}万元</span><br/>
                                    当月发放工资:  <span style="margin-right:.5rem">${data.salary}万元</span><br/>
                                    在建项目:  <span style="margin-right:.5rem">${data.building}个</span><br/>
                                    专户数:  <span style="margin-right:.5rem">${data.account}个</span><br/>
                                    实名制进场人数:  <span style="margin-right:.5rem">${data.staffs}人</span><br/>
                                    单月拨付款:  <span style="margin-right:.5rem">${data.disburse}万元</span>
                                `
                            }
                        },
                        geo: {
                            map: '新疆',
                            show: true,
                            roam: true,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: '#002E57',
                                    borderColor: '#0F6FB5',// 线
                                    shadowColor: '#00B5E7',// 外发光
                                    shadowBlur: 8
                                },
                                emphasis: {
                                    areaColor: '#002E57',// 悬浮区背景0a2dae
                                }
                            }
                        },
                        series: [
                            {
                                symbolSize: 12,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'bottom',
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'yellow'
                                    }
                                },
                                name: 'light',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: mapData
                            },
                        ]
                    };
                    // 地图
                    mytu3.setOption(option3)
                })
            })
        }

        // 本月工资发放情况
        function payoff() {
            get('/index/bigScreen/api/salarySituation?deptId=' + deptId, null, function (res) {
                console.log('本月工资发放情况', res.data)
                const data = res.data
                const xData = []
                const num = []
                const money = []
                data.map((v, i) => {
                    xData.push(v.districtName)
                    num.push(v.staffs)
                    money.push(v.salary)
                })
                const option4 = {
                    title: {
                        textStyle: {
                            color: "#6a9cd5",
                        },
                        left: "center",
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    color: ['#D2691E', '#01cbb3'],
                    legend: {
                        itemGap: 50,
                        data: ['发放人数(人)', '发放金额(万元)'],
                        textStyle: {
                            color: '#f9f9f9',
                            borderColor: '#fff'
                        },
                        top: '6%'
                    },
                    grid: {
                        top: '20%',
                        left: '8%',
                        right: '2%',
                        bottom: '24%'
                    },
                    xAxis: [
                        {
                            type: 'category',// 数据类型为不连续数据
                            boundaryGap: true,// 坐标轴两边是否留白
                            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                                show: true,
                                lineStyle: {
                                    color: '#233e64' //x轴颜色
                                },
                            },
                            axisLabel: { //坐标轴刻度标签的相关设置
                                textStyle: {
                                    color: '#fff',
                                },
                                interval: 0, // 不要间隔显示
                                rotate: 60,
                            },
                            axisTick: { // 刻度点数轴
                                show: true
                            },
                            data: xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',//y轴数据类型为连续的数据
                            minInterval: 1,
                            min: 0,//y轴上的刻度最小值
                            // max: 140, // y轴上的刻度最大值
                            // splitNumber: 7, // y轴上的刻度段数
                            splitLine: { // y轴上的y轴线条相关设置
                                show: true,
                                lineStyle: {
                                    color: '#233e64'
                                }
                            },
                            axisLine: {//y轴的相关设置
                                show: true,
                                lineStyle: {
                                    color: '#233e64' //y轴颜色
                                },
                            },
                            axisLabel: {//y轴的标签相关设置
                                textStyle: {
                                    color: '#6a9cd5',
                                },
                            },
                            axisTick: { show: true, },  //刻度点数轴
                        }
                    ],
                    series: [
                        {
                            name: '发放人数(人)',
                            type: 'line',//统计图类型为折线图
                            smooth: true, //是否平滑曲线显示
                            symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
                            lineStyle: {//线条的相关设置
                                normal: {
                                    color: "#D2691E"   // 线条颜色
                                }
                            },
                            areaStyle: { //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(210,105,30, 0.9)' },
                                        { offset: 1, color: 'rgba(210,105,30, 0.1)' }
                                    ], false),

                                    shadowColor: 'rgba(210,105,30,1)', //阴影颜色
                                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                                }
                            },
                            data: num
                        },
                        {
                            name: '发放金额(万元)',
                            type: 'line',//统计图类型为折线图
                            smooth: true, //是否平滑曲线显示
                            symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
                            lineStyle: {//线条的相关设置
                                normal: {
                                    color: "#117D6D"   // 线条颜色
                                }
                            },
                            areaStyle: { //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(17,125,109, 0.9)' },
                                        { offset: 0.8, color: 'rgba(17,125,109, 0)' }
                                    ], false),
                                    shadowColor: 'rgba(17,125,109 0.9)', //阴影颜色
                                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                                }
                            },
                            data: money
                        }
                    ]
                }
                mytu4.setOption(option4)
            })
        }

        // 工人情况
        function getWorkerData() {
            get('/index/bigScreen/api/staffs?deptId=' + deptId, null, function (res) {
                const data = res.data
                console.log('工人情况', data)
                const workerData = [
                    { name: '实名制人数', img: './img/icon1.png', value: data.staffs },
                    { name: '进场工人数', img: './img/icon2.png', value: data.inStaffs },
                    { name: '离场工人数', img: './img/icon3.png', value: data.outStaffs },
                    { name: '考勤工人数', img: './img/icon4.png', value: data.atdStaffs },
                ]
                var workerHtml = ''
                $.each(workerData, (i, v) => {
                    workerHtml += `<div class="item">
                        <div class="round">
                            <img src="${v.img}" />
                        </div>
                        <div>
                            <div style="color:#fff">${v.value}</div>
                            <span style="color:#ccc; font-size:.75rem;">${v.name}</span>
                        </div>
                    </div>`
                })
                $("#tu5").empty()
                $("#tu5").append(workerHtml)
            })
        }

        // 工人分布情况
        function workerFenbu() {
            get('/index/bigScreen/api/staffsDistribute?deptId=' + deptId, null, function (res) {
                console.log('工人分布情况', res.data)
                const data = res.data
                const xData = []
                const data1 = [] // 实名制总人数
                const data2 = []
                data.map((v, i) => {
                    xData.push(v.districtName)
                    data1.push(v.staffs)
                    data2.push(v.atdStaffs)
                })
                // console.log(xData,data1,data2)
                const option6 = {
                    color: ['#4D94F3', '#FE9800'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '4%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true,
                    },
                    legend: {
                        itemGap: 50,
                        data: ['实名进场人数', '考勤总人数'],
                        textStyle: {
                            color: '#f9f9f9',
                            borderColor: '#fff'
                        },
                        top: '6%'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                                show: true,
                                lineStyle: {
                                    color: '#f9f9f9'
                                },
                            },
                            axisLabel: { //坐标轴刻度标签的相关设置
                                color: '#fff',
                                interval: 0, // 间隔显示
                                // formatter: function (value) {
                                //     return value.split('').join("\n")
                                // },
                                textStyle: {
                                    color: '#d1e6eb',
                                    margin: 15,
                                },
                                rotate: 45,
                            },
                            axisTick: {
                                show: false,
                            },
                            data: xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0a3256'
                                }
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: '#d1e6eb',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        }
                    ],
                    series: [
                        {
                            name: '实名进场人数',
                            type: 'line',
                            barWidth: 30,
                            data: data1
                        },
                        {
                            name: '考勤总人数',
                            type: 'line',
                            smooth: true, //是否平滑曲线显示
                            data: data2
                        }
                    ]
                };
                mytu6.setOption(option6)
            })
        }

        // 开户银行
        function bank() {
            get('/index/bigScreen/api/accountByBank?deptId=' + deptId, null, function (res) {
                console.log('开户银行', res.data)
                const data = res.data
                const xData = []
                data.map((v, i) => {
                    xData.push(v.bankType)
                })

                const seriesData = []
                const arr = []
                data.map((a, b) => {
                    try {
                        a.data.map((v, i) => {
                            arr.push(v.projectType)
                        })
                    } catch (error) { }
                })
                const arr1 = Array.from(new Set(arr))

                // 专户余额
                arr1.map((v, i) => {
                    seriesData.push(
                        {
                            name: v,
                            data: [],
                            stack: "one",
                            type: "bar",
                            barWidth: 24,
                            label: {
                                normal: {
                                    show: true,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    show: true
                                }
                            },
                            tooltip: {
                                formatter: `专户余额<br/>{a}<br/>{b}<br/>{c}万元`
                            },
                            yAxisIndex: 0
                        }
                    )
                })
                seriesData.map((v, i) => {
                    data.map((a, b) => {
                        if (a.data) {
                            a.data.map((c, d) => {
                                if (v.name == c.projectType) {
                                    v.data[b] = c.balance // 专户余额 account
                                }
                            })
                        }
                    })
                })
                // 专户个数
                arr1.map((v, i) => {
                    seriesData.push(
                        {
                            name: v,
                            data: [],
                            stack: "two",
                            type: "bar",
                            barWidth: 24,
                            label: {
                                normal: {
                                    show: true
                                },
                            },
                            tooltip: {
                                formatter: `专户个数<br/>{a}<br/>{b}<br/>{c}个`
                            },
                            yAxisIndex: 1
                        }
                    )
                })
                seriesData.map((v, i) => {
                    data.map((a, b) => {
                        if (a.data) {
                            a.data.map((c, d) => {
                                if (v.name == c.projectType) {
                                    if (i > arr1.length - 1) {
                                        v.data[b] = c.account // 专户个数 
                                    }
                                }
                            })
                        }
                    })
                })

                // console.log(123, arr1, seriesData)

                const option7 = {
                    color: colorArr,
                    grid: {
                        top: '15%',
                        left: '12%',
                        right: '12%',
                        bottom: '30%',
                    },
                    legend: {
                        show: true,
                        x: 'center',
                        bottom: '7%',
                        itemGap: 10,
                        data: arr1,
                        itemWidth: 18,
                        itemHeight: 8,
                        textStyle: {
                            color: '#fff',
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: [
                        {
                            type: "category",
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {//坐标轴轴线相关设置
                                lineStyle: {
                                    color: '#0a3256',
                                    opacity: 0.2
                                }
                            },
                            axisLabel: { //坐标轴刻度标签的相关设置。
                                interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                                margin: 15,
                                rotate: 0,
                                formatter: function (value) {
                                    var ret = ""; //拼接加\n返回的类目项  
                                    var maxLength = 6; //每项显示文字个数  
                                    var valLength = value.length; //X轴类目项的文字个数  
                                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                    if (rowN > 1) //如果类目项的文字大于3,  
                                    {
                                        for (var i = 0; i < rowN; i++) {
                                            var temp = ""; //每次截取的字符串  
                                            var start = i * maxLength; //开始截取的位置  
                                            var end = start + maxLength; //结束截取的位置  
                                            // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                            temp = value.substring(start, end) + "\n";
                                            ret += temp; // 凭借最终的字符串  
                                        }
                                        return ret;
                                    }
                                    else {
                                        return value;
                                    }
                                },
                                textStyle: {
                                    color: '#aaa',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            data: xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '专户余额(万元)',
                            position: 'left',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0a3256'
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#fff',
                                }
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: '#d1e6eb',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        {
                            type: 'value',
                            name: '专户个数(个)',
                            minInterval: 1,
                            // max: 20,
                            position: 'right',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#218de0'
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLabel: {
                                margin: 20,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        }
                    ],
                    series: seriesData,
                }
                mytu7.setOption(option7)
            })
        }

    </script>
</html>